<template>
  <div class="layui-m-layer" :class='{"vshow":value}'>
    <div class="layui-m-layershade" @click="closeMask"></div>
    <div class="layui-m-layermain">
      <div class="layui-m-layersection">
        <div class="layui-m-layerchild type-alert bounced layui-m-anim-scale">
          <h3 style="">{{title}}</h3>
          <div class="layui-m-layercont">
            <slot></slot>
          </div>
          <div class="layui-m-layerbtn">
            <span @click="noCancel" v-if="cancelShow">取消</span>
            <span @click="yeConfirm" v-if="confirmShow">确定</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
        components: {
        },
        data () {
            return {

            }
        },
       props: {
         value:{ type:[Boolean] , default: false },
         title:{ type:[String] , default: "温馨提示" },
         cancelText:{type:[String] , default: "取消"},
         cancelShow:{ type:[Boolean] , default: true },
         confirmText:{type:[String] , default: "确定"},
         confirmShow:{ type:[Boolean] , default: true },
        },
        created(){

        },
        mounted(){
        },
        methods: {
          /**
           * 取消
           */
          noCancel(){

            this.$emit('input', false);
            this.$emit('onCancel');
          },
          /**
           * 确认
           */
          yeConfirm(){

            this.$emit('input', false);
            this.$emit('onConfirm');
          },
          /**
           * 遮罩层
           */
          closeMask(){
            this.noCancel();
          }
        }
    }
</script>
<style lang="scss" scoped>
.layui-m-layer{
  display: none;
  &.vshow{
     display: block;
   }
}
</style>
